<template>
  <!-- Main Framework7 App component where we pass Framework7 params -->
  <f7-app
    id="app"
    :params="f7params"
    :class="getThemeDark?'dark':'light'"
    :color-theme="theme_color"
  >
    <!-- initial page is specified in routes.js -->
    <f7-view main url="/"></f7-view>

    <!--音频播放标签-->
    <audio src="" ref="audio" @timeupdate="getcurrentTime" @ended="loopPlayback" @canplay="getDuration"></audio>
  </f7-app>
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
import constantRoutes from '@/router/index.js'
import {getLocalItem,setLocalItem} from '@/utils/index.js'
export default {
  name: 'app',
  // components:{f7App,f7View,f7Page,f7Navbar,f7Toolbar,f7Link},
  computed: {
    ...mapGetters({
      getThemeDark:'getThemeDark',
      getList:'getList',
    }),
    theme_color() {
      return this.$store.state.theme_color
    },
  },
  data() {
    return {
      // app params
      f7params: {
        name: 'my Musc for Life',
        id: 'com.myapp.myMuscforLife',
        // specify routes for app
        routes: constantRoutes,
        // ...
      },
    }
  },
  methods:{
    ...mapActions({
      getcurrentTime:'getcurrentTime',
      getDuration:'getDuration',
      sendMusic:'sendMusic',
      loopPlayback:'loopPlayback',
      changeIsThemeDark:'changeIsThemeDark',
    })
  },
  mounted() {
    if (getLocalItem('is_theme_dark') === 1){
      this.changeIsThemeDark(true);
    }
    // console.log('process.env',process.env);
    
    this.$store.dispatch('sendAudio',this.$refs.audio);//在模板编译完成后把audio元素发送给action
    let timL = getLocalItem('music_list');
    if (timL && timL.length){
      timL.forEach(item=>{
        this.$store.dispatch('sendMusic',item)
      })
    }
    //使用addEventListener监听页面刷新或关闭
    window.addEventListener("beforeunload", e => {
      setLocalItem('music_list', this.getList)
    });
    
  },
  beforeDestroy(){
    console.log('app is ready to exit!');
  }
  
}
</script>
